import React from 'react'
import { connect } from 'react-redux';
import {Divider,Typography} from 'antd'
import {Link} from 'react-router-dom'
import * as echarts from 'echarts';
import {Button} from 'antd'
import { RollbackOutlined} from '@ant-design/icons';
import DatePicker from '&components/datePicker'
import styles from './index.less'
const { Title } = Typography
class Utpages extends React.Component{
    constructor(props){
        super(props)
        this.state = {
        }
    }
    // componentDidMount(){
    //     const {Utequip} = this.props;
    //     const backIg = this.props.backImgList
    //     backIg.map((item,index)=>{
    //         if(item.backImgVO1.name === 'UT'){
    //             console.log('111111')
    //             item.backImgVo2s.map((items,index)=>{
    //                 console.log('111111')
    //                if(items.equipId === Utequip.equipId ){
    //                    this.setState({des:items.describe})
    //                }
    //             })
    //         }
    //     })
    // }
   componentDidUpdate() {
        
      let utDatas = this.props.utDatas.value || []
            let legendData = new Array();

            utDatas.probeList.map((item,index)=>{
                legendData[index]=`探头${item}`; 
            })
            console.log(legendData)
            let datasss = []
            utDatas.utResultLineVoList.map((item,index)=>{
                const needDatas= {
                    name: `探头${item.probeId}`,
                    type: 'line',
                    stack: 'Total',
                    data: item.valueList,
                    markPoint: {
                        data: [
                          { type: 'max', name: 'Max' },
                          { type: 'min', name: 'Min' }
                        ]
                      },
                }
                datasss.push(needDatas)
            })
            console.log(datasss)
            let chartDom = document.getElementById('main');
            let myChart = echarts.init(chartDom);
            let option = {
            title: {
                text: '该位置所有探头数据:'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data:legendData
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                feature: {
                saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: utDatas.utResultLineVoList[0].timeList//日期时间
            },
            yAxis: {
                type: 'value',
            },
            series: datasss
            };

            option && myChart.setOption(option);
        //     console.log(this.props)
        //     const {Utequip} = this.props;
        // const backIg = this.props.backImgList
        // backIg.map((item,index)=>{
        //     if(item.backImgVO1.name === 'UT'){
        //         console.log('111111')
        //         item.backImgVo2s.map((items,index)=>{
        //             console.log('111111')
        //            if(items.equipId == Utequip.equipId ){
        //                this.props.setChoice({allFsmDatas:items.describe})
        //            }
        //         })
        //     }
        // })
    }
    render(){
      const {Utequip} = this.props
      console.log(Utequip);
        // let datas = this.props.allFsmDatas ? this.props.allFsmDatas:''
        return (<>
         {/* <Divider style={{fontSize:20,marginBottom:-60+'px'}}>
         {'设备名称：'+datas}
         </Divider> */}
        <div style={{display: 'flex',textAlign:'center'}}><Title style={{margin:'0 auto'}}>{Utequip.des}</Title></div>
        <Link to='/equipment/hotMap'><Button className={styles.linkStyle}><RollbackOutlined />返回设备列表</Button></Link> 
        <div id="main" className={styles.utStyles}></div>
        
        {/* <div className={styles.datepicker}>
        <DatePicker ></DatePicker>
        </div> */}
        </>)
    }
}
const mapStateToProps= (state)=>({
    // Utdescribe:state.equipmentPage.Utdescribe,
    // allFsmDatas: state.equipmentPage.allFsmDatas,
    // backImgList :state.equipmentPage.backImgList,
    utDatas: state.equipmentPage.utDatas,
    Utequip:state.equipmentPage.Utequip,
})
const mapDispatchToProps = (dispatch)=>({
    getAllFsmDatas:dispatch.equipmentPage.getAllFsmDatas,
    getAllUtDatas:dispatch.equipmentPage.getAllUtDatas,
    setChoice:dispatch.equipmentPage.setState
})
export default connect(mapStateToProps,mapDispatchToProps)(Utpages)